<template>
    <view class="content">
        <view class="nav">
            <view @click="chooseNav(1)">
                <image src="../../static/image/index_07.png" class="index-07"></image>
                <view :class="{active : type == 1}">审核通知</view>
            </view>
            <view @click="chooseNav(2)">
                <image src="../../static/image/index_08.png" class="index-07"></image>
                <view :class="{active : type == 2}">佣金信息</view>
                <!-- <view class="yj-info" v-if="count2 > 0">{{count2}}</view> -->
            </view>
        </view>
        
        <view class="wrapper">
            <view class="item" v-for="(item, index) in list" :key="index">
                <view class="u-flex u-row-center">
                    <view class="time">{{item.create_time}}</view>
                </view>
                <view class="item-d">
                    <view class="item-tit">{{item.title}}</view>
                    <view class="item-text">{{item.message}}</view>
                </view>
            </view>
        </view>
        
        <!-- <view class="none" v-if="list.length == 0">暂无相关信息</view> -->
        
        <view style="height: 94rpx;padding-top: 30rpx;">
            <u-loadmore :status="status" v-if="status != 'loadmore'" />
        </view>
        
        <!-- 底部导航 -->
        <u-tabbar v-model="current" :list="tab_list" active-color="#29b0ed" :border-top="false" height="120" @change="tabbarChange"></u-tabbar>
    </view>
</template>

<script>
export default {
    data() {
        return {
            statusBar: 0,
            background: { backgroundColor: 'rgba(255,255,255,0)' },
            current: 0, //底部导航索引
            tab_list: [
                {
                    iconPath: "/static/icon/tab_01.png",
                    selectedIconPath: "/static/icon/tab_01.png",
                    text: '',
                    pagePath: "/pages/tabbar/index",
                    customIcon: false
                },{
                    iconPath: "/static/icon/tab_03.png",
                    selectedIconPath: "/static/icon/tab_02.png",
                    text: '客户',
                    customIcon: false,
                    pagePath: "/pages/tabbar/kehu"
                },{
                    iconPath: "/static/icon/tab_05.png",
                    selectedIconPath: "/static/icon/tab_04.png",
                    text: '消息',
                    customIcon: false,
                    pagePath: "/pages/tabbar/news"
                },{
                    iconPath: "/static/icon/tab_07.png",
                    selectedIconPath: "/static/icon/tab_06.png",
                    text: '微聊',
                    customIcon: false,
                    pagePath: "/pages/tabbar/wechat"
                },{
                    iconPath: "/static/icon/tab_09.png",
                    selectedIconPath: "/static/icon/tab_08.png",
                    text: '我的',
                    customIcon: false,
                    pagePath: "/pages/tabbar/mine"
                }
            ],
            type: 1,
            status: 'loadmore', //是否显示没有更多了
            page: 1,
            list: [],
            count2: 0,
            tts: '',
        };
    },
    onLoad() {
        let _this = this;
        //状态栏高度
        uni.getSystemInfo({
        	success: function(res) {
        		_this.statusBar = res.statusBarHeight;
        	}
        });
        if (this.$getSync('userToken')) {
            this.getList()
        }
        
        uni.$on('NEWS', data => {
            this.page = 1
            this.list = []
            this.status = 'loadmore'
            this.getList()
        })
    },
    onShow() {
        if (!this.$getSync('userToken')) {
            uni.showModal({
            	title: '温馨提示',
            	content: '去登录？',
            	success: (res) => {
            		if (res.confirm) {
            			this.$gTo('/pages/login/login')
            		} else if (res.cancel) {
            			this.$sTo('/pages/tabbar/index')
            		}
            	}
            });
        }
    },
    onPullDownRefresh() {
        var _this = this
        _this.status = 'loadmore';
        _this.page = 1;
        _this.list = [];
        _this.getList();
        uni.stopPullDownRefresh();
    },
    onReachBottom() {
    	if(this.page == 1){return}
    	this.getList()
    },
    methods: {
        chooseNav(num) {
            if (this.type == num) return
            this.type = num
            this.page = 1
            this.list = []
            this.status = 'loadmore'
            this.getList()
        },
        
        getList() {
        	if (this.status == 'nomore') return;
        	this.status = 'loading';
        	this.$ajax('my_message', {
        		user_token: this.$getSync('userToken'),
        		page: this.page,
        		limit: 10,
                type: this.type, //1审核通知 2佣金信息
        	}).then(ret => {
        		if (ret.success == 1000) {
                    // this.count2 = ret.detail.count2
        			if (ret.detail && ret.detail.message && ret.detail.message.length > 0) {
        				this.list = this.list.concat(ret.detail.message);
        				this.page++;
        				this.status = 'loadmore'
        			} else {
        				this.status = 'nomore'
        			}
        		} else {
        			this.$toast(ret.message);
        		}
        	});
        },
        
        //切换底部导航
        tabbarChange(e) {
        	this.current = e;
        },
        
        onPageScroll: function(e) {
        	//nvue暂不支持滚动监听，可用bindingx代替
        	// console.log("滚动距离为：" + e.scrollTop);
        	let a = e.scrollTop * 0.05;
        	if (a > 1) {
        		a = 1;
        	}
        	if (e.scrollTop == 0) {
        		this.background.backgroundColor = 'rgba(49,153,245,0)';
        	} else {
        		this.background.backgroundColor = 'rgba(49,153,245,' + a + ')';
        	}
        },
    }
};
</script>

<style>
    .u-tabbar__content__item .u-icon__img {
    	width: 50rpx !important;
    	height: 50rpx !important;
    }
    .u-tabbar__content>.u-tabbar__content__item:first-child .u-icon__img{
        width: 100rpx !important;
        height: 100rpx !important;
        margin-top: -20rpx;
    }
</style>

<style lang="scss">
    .none{
    	text-align: center;
    	padding: 50upx 0;
    	box-sizing: border-box;
    	color: #999;
    	font-size: 24upx;
    }
    
    page{
        background-color: #f5f5f5;
    }
    .nav{
        border-top: 2rpx solid #e6e6e6;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .nav>view{
        width: calc(100vw / 2);
        padding: 35rpx 0 30rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        font-weight: bold;
        position: relative;
    }
    .index-07{
        width: 131rpx;
        height: 86rpx;
        margin-bottom: 18rpx;
    }
    .active::after{
        display: block;
        content: '';
        width: 32rpx;
        height: 6rpx;
        background-color: #00a1e9;
        border-radius: 25%;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .yj-info{
        position: absolute;
        top: 26rpx;
        left: 230rpx;
        color: #fff;
        font-size: 18rpx;
        line-height: 1;
        background-color: #fe6155;
        padding: 6rpx 8rpx;
        border-radius: 15rpx 15rpx 15rpx 0;
    }
    
    .wrapper{
        padding: 0 20rpx 100rpx;
    }
    .item{
        padding-top: 35rpx;
    }
    .time{
        font-size: 22rpx;
        text-align: center;
        line-height: 1;
        color: #fff;
        padding: 10rpx 25rpx;
        background-color: #dfdfdf;
        border-radius: 50rpx;
        margin-bottom: 18rpx;
    }
    .item-d{
        padding: 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
    }
    .item-tit{
        font-size: 30rpx;
        font-weight: bold;
        padding-bottom: 10rpx;
        word-break: break-all;
        white-space: pre-line;
    }
    .item-text{
        font-size: 24rpx;
        color: #666666;
        word-break: break-all;
        white-space: pre-line;
    }
    
</style>
